<template>
  <view class="unsubscribe-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="增值业务退订" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- Tab 切换 -->
      <view class="tab-container">
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'mobile' }"
          @click="switchTab('mobile')"
        >
          <text class="tab-text">手机增值业务</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'itv' }"
          @click="switchTab('itv')"
        >
          <text class="tab-text">ITV增值业务</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: currentTab === 'telecom' }"
          @click="switchTab('telecom')"
        >
          <text class="tab-text">电信增值业务</text>
        </view>
      </view>
      
      <!-- 内容区域 -->
      <view class="content-area">
        <!-- 空状态 -->
        <view class="empty-state">
          <view class="empty-box">
            <image src="/static/icons/icon-none.png" alt=""/>
            <text class="empty-text">暂无内容哦~</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'
import {api} from '@/utils/api.js'



const navBarHeight = ref(88)
const currentTab = ref('mobile')

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44

  querySpAddedProduct()
})

const querySpAddedProduct = () => {
  api.querySpAddedProduct({}).then(res => {
    console.log('查询增值业务成功:', res)
    if (res.code === 200) {
      // 处理查询结果
      
    } else {
      uni.showToast({
        title: res.msg || '查询失败',
        icon: 'none'
      })
    }
  }).catch(err => {
    console.error('查询增值业务失败:', err)
  })
}

const switchTab = (tab) => {
  currentTab.value = tab
  // 这里可以添加切换 tab 后的数据加载逻辑
}
</script>

<style scoped>
.unsubscribe-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(40rpx);
background: rgba(255, 255, 255, 0.8);
}
.page-content {
  position: relative;
  z-index: 2;
   
  /* background: #fff; */
}

/* Tab 容器 */
.tab-container {
  display: flex;
  align-items: center;
  /* border-bottom: 1rpx solid #F0F0F0; */
  padding: 0 40rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24rpx 0;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  position: relative;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100rpx;
  height: 4rpx;
  background: #4A90E2;
  border-radius: 2rpx;
}

.tab-text {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: rgba(78, 138, 254, 1);
  font-weight: 500;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 60rpx 40rpx;
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
}

.empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
  padding: 60rpx 40rpx;
  border-radius: 16rpx;
  min-width: 400rpx;
}
.empty-box image{
  width: 280rpx;
  height: 280rpx;
}

.empty-text {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
}
</style>

